<script setup>
import { defineProps, onMounted, onBeforeMount, ref } from 'vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  tableConfig: {
    type: Array,
    default: () => [],
  },
  tableStripe: {
    type: Boolean,
    default: false,
  },
  tableSortable: {
    type: Boolean,
    default: false,
  },
  tableRowColors: {
    type: Array,
    default: () => [],
  },
  tableScrollInterval: {
    type: Number,
    default: 1000,
  },
  tableRowStyle: {
    type: Object,
    default: () => {},
  },
  tableHeadStyle: {
    type: Object,
    default: () => {},
  },
})
let tdata = props.tableData
let tr_color = props.tableRowColors
onBeforeMount(() => {})
const scrollContainer = ref(null)
onMounted(() => {
  // 动态设置 CSS 变量
  const root = document.documentElement
  root.style.setProperty('--color1', tr_color[0])
  root.style.setProperty('--color2', tr_color[1])
  root.style.setProperty('--interval', props.tableScrollInterval + 'ms')
  root.style.setProperty('--fontsize', props.tableRowStyle.fontSize)
  root.style.setProperty('--headfontsize', props.tableHeadStyle.fontSize)

  const scrollBody =
    scrollContainer.value.$refs.bodyWrapper.childNodes[0].childNodes[0].childNodes[0]

  setInterval(() => {
    tr_color.push(tr_color.shift())
    root.style.setProperty('--color1', tr_color[0])
    root.style.setProperty('--color2', tr_color[1])
    let tc_shift = tdata.shift()
    tdata.push(tc_shift)

    if (scrollBody) {
      scrollBody.scrollTop += scrollBody.clientHeight / props.tableData.length / 2 // 向上滚动一小段距离
      if (scrollBody.scrollTop >= scrollBody.scrollHeight - scrollBody.clientHeight) {
        scrollBody.scrollTop = 0 // 滚动到底部时重置
      }
    }
  }, props.tableScrollInterval)
})
</script>

<template>
  <el-table
    :data="tdata"
    :stripe="tableStripe"
    ref="scrollContainer"
    :row-style="tableRowStyle"
    :header-row-style="tableHeadStyle"
  >
    <el-table-column
      v-for="item in tableConfig"
      :key="item"
      :prop="item.prop"
      :label="item.label"
      :sortable="tableSortable"
    />
    <!-- <el-table-column prop="name" label="名称" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="city" label="城市" /> -->
  </el-table>
</template>

<style lang="scss" scoped>
:deep(.el-table__row) {
  background-color: var(--color1);
}
:deep(.el-table__row:hover) {
  background-color: transparent !important;
}
:deep(.el-table__header .el-table__cell .cell) {
  height: var(--headfontsize);
  line-height: var(--headfontsize);
  padding: 0;
}

:deep(.el-table__row .el-table__cell .cell) {
  height: var(--fontsize);
  line-height: var(--fontsize);
  padding: 0;
}
:deep(.el-table__row--striped .el-table__cell) {
  background-color: var(--color2) !important;
}
// :deep(.sort-caret) {
//   height: var(--headfontsize);
//   line-height: var(--headfontsize);
//   padding: 0;
// }
.el-table {
  width: 100%;
  height: 100%;
  // transition: all var(--interval);
}
</style>
